<template>
  <!--  卡片区域  -->
  <n-card>
    <!--    工具栏    -->
    <n-space justify="end" style="padding-bottom: 15px;">
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-button text style="font-size: 20px; width:22px; height:32px;" @click="refresh">
            <n-icon>
              <refresh-sharp />
            </n-icon>
          </n-button>
        </template>
        <span>刷新</span>
      </n-tooltip>
      <!--密度-->
      <n-popselect v-model:value="densityValue" :options="densityOptions" trigger="click">
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-button text style="font-size: 20px; width:22px; height:32px; margin-left: 11px">
              <n-icon>
                <auto-fit-height20-regular />
              </n-icon>
            </n-button>
          </template>
          <span>密度</span>
        </n-tooltip>
      </n-popselect>
      <!--列设置-->
      <n-tooltip trigger="hover">
        <template #trigger>
          <n-popover trigger="click" placement="bottom-end">
            <template #trigger>
              <n-button text style="font-size: 20px; width:22px; height:32px; margin-bottom: 2px; margin-left: 11px">
                <n-icon>
                  <Settings20Regular />
                </n-icon>
              </n-button>
            </template>
            <template #header>
              <n-checkbox label="列展示" v-model:checked="allChecked" @update:checked="allChange" />
            </template>
            <n-space vertical>
              <n-checkbox v-for="item in checkboxList" :key="item.name" :label="item.name" v-model:checked="item.checked" @update:checked="itemChange" />
            </n-space>
          </n-popover>
        </template>
        <span>列设置</span>
      </n-tooltip>
    </n-space>
    <!--    数据表格    -->
    <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :bordered="false"
        :size="densityValue"
        :loading="loading"

    />
  </n-card>
</template>

<script>
import {defineComponent, h, ref} from 'vue'
import {NButton, NTag, NFlex, NIcon, NRate, NPopselect} from "naive-ui";
import { Add } from "@vicons/ionicons5"
import { RefreshSharp } from "@vicons/material"
import { AutoFitHeight20Regular ,Settings20Regular} from "@vicons/fluent"
import { LeftOutlined , RightOutlined} from "@vicons/antd"

export default defineComponent({
  components: {
    Add,
    RefreshSharp,
    AutoFitHeight20Regular,
    Settings20Regular,
    LeftOutlined,
    RightOutlined
  },
  setup(){
    // const message = window.$message

    /*  数据表格  */
    // 创建表格列模版
    const createColumns = () => {
      return [
        {
          title: "序号",
          key: "index",
          width:'100',
          render(row, index) {
            return index + 1;
          }
        },
        {
          title: "开展时间",
          key: "kai",
          width:'110',
        },
        {
          title: "项目周期",
          key: "xm",
          width:'100',
        },
        {
          title: "学科分类",
          key: "fl",
          render(row) {
            switch (row.fl) {
              case 1:
                return h(
                    NFlex,
                    {
                      wrap:false,
                      size: "small",
                    },
                    {
                      default: () => [
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "success",
                            },
                            { default: () => "工程类" }
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "success",
                            },
                            { default: () => "电子信息工程" }
                        )
                      ]
                    }
                )
            }


          }
        },
        {
          title: "学科方向",
          key: "fx",
          render(row) {
            switch (row.fx) {
              case 1:
                return h(
                    NFlex,
                    {
                      wrap:false,
                      size: "small",
                    },
                    {
                      default: () => [
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "金融工程" }
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "金融数学" }
                        )
                      ]
                    }
                )
            }
          }
        },
        {
          title: "课题",
          key: "kt",
          width:'320',
        },
        {
          title: "学校",
          key: "xx",
          width:'100',
        },
        {
          title: "导师级别",
          key: "ds",
          render(row) {
            switch (row.fx) {
              case 1:
                return h(
                    NFlex,
                    {
                      wrap:false,
                      size: "small",
                    },
                    {
                      default: () => [
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "终生教授" }
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "金融项目主任" }
                        )
                      ]
                    }
                )

            }
          }
        },
        {
          title: "导师姓名",
          key: "ming",
          width:'170',
        },
        {
          title: "难度",
          key: "nan",
          width:'100',
          render(row){
            return h(
                NRate,
                {
                  value: row.nan,
                  allowHalf: true,
                  readonly: true
                },
                // { default: () => "" }
            )
          }
        },
        {
          title: "售价",
          key: "sj",
          width:'100',
        },
        {
          title: "课题材料链接",
          key: "cl",
          width:'120',
          render() {
            return h(
                NButton,
                {
                  text: true,
                  color: "#3FA2FE",
                },
                { default: () => "材料链接" }
            )
          }
        },
        {
          title: "建议先修课程",
          key: "jy",
          render(row) {
            switch (row.jy) {
              case 1:
                return h(
                    NFlex,
                    {
                      wrap:false,
                      size: "small",
                    },
                    {
                      default: () => [
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "数学基础" }
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "概率统计" }
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "微积分和线性代数基础" }
                        )
                      ]
                    }
                )

            }
          }
        },
        {
          title: "适合学生专业方向",
          key: "shi",
          render(row) {
            switch (row.shi) {
              case 1:
                return h(
                    NFlex,
                    {
                      wrap:false,
                      size: "small",
                    },
                    {
                      default: () => [
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "金融" }
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "公司金融" }
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "风险投资" }
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "组织管理" }
                        ),
                        h(
                            NTag,
                            {
                              strong: true,
                              size: "small",
                              type: "info",
                            },
                            { default: () => "IPO" }
                        )
                      ]
                    }
                )
            }
          }
        },
        {
          title: "操作",
          key: "actions",
          fixed:'right',
          width:'60',
          render(row) {
            return h(
                NButton,
                {
                  // size: "small",
                  text: true,
                  color: "#3FA2FE",
                },
                {
                  default: () => [
                    h(
                        NPopselect,
                        {
                          options: [
                            {
                              label: '通过',
                              value: '通过'
                            },
                            {
                              label: '拒绝',
                              value: '拒绝'
                            },
                          ],
                          // onSelect:
                        },
                        { default: () => "审核" }
                    ),
                  ]
                }
            )
          }
        }
      ];
    };
    const columns = createColumns()
    // 表格数据
    const data = [
      {kai:'2023/10/21',xm:'12周',fl:1,fx:1,kt:'金融学课题：金融市场中的量化投资策略研究',xx:'剑桥大学',ds:1,ming:'Raghavendra Rau',nan:'4',sj:'33800',jy:1,shi:1},
      {kai:'2023/10/21',xm:'12周',fl:1,fx:1,kt:'金融学课题：金融市场中的量化投资策略研究',xx:'剑桥大学',ds:1,ming:'Raghavendra Rau',nan:'4',sj:'33800',jy:1,shi:1},
      {kai:'2023/10/21',xm:'12周',fl:1,fx:1,kt:'金融学课题：金融市场中的量化投资策略研究',xx:'剑桥大学',ds:1,ming:'Raghavendra Rau',nan:'4',sj:'33800',jy:1,shi:1},
    ];
    // 总条数
    const total = ref(3);
    // 总页数
    const totalPage = ref(1);
    // 当前页
    const page = ref(1);
    // 当前获取数据最后一页
    // const lastPage = ref(1);
    // 分页设置
    const pagination = {
      prev:()=>{
        return h(
            NIcon,
            {
              onClick:()=>{
                if (page.value > 1) {
                  page.value --
                }
              }
            },
            {
              default: () => h(LeftOutlined)
            }
        )
      },
      next:()=>{
        return h(
            NIcon,
            {
              onClick:()=>{
                if (page.value < totalPage.value) {
                  page.value ++
                }
              }
            },
            {
              default: () => h(RightOutlined)
            }
        )
      },
      prefix:()=>{
        const range = [page.value * 10 - 9, page.value * 10];
        if (page.value === 0) {
          return `第 0 - 0 条 / 总共 ${total.value} 条`
        }else if (page.value === 1 && totalPage.value !== 1) {
          return `第 1 - ${range[1]} 条 / 总共 ${total.value} 条`;
        }else if (page.value === totalPage.value) {
          return `第 ${range[0]} - ${data.length} 条 / 总共 ${total.value} 条`;
        }else if (page.value > 1 && page.value < totalPage.value) {
          return `第 ${range[0]} - ${range[1]} 条 / 总共 ${total.value} 条`;
        }
      },
    }


    /*  工具栏  */
    /*刷新*/
    // 加载
    const loading = ref(false)
    // 刷新
    function refresh() {
      // loading.value = true
      // setTimeout(() => {
      //   loading.value = false
      // }, 1000)
    }

    /*密度*/
    // 密度事件数据
    const densityOptions = [
      {
        label: "默认",
        value: "large"
      },
      {
        label: "中等",
        value: "medium"
      },
      {
        label: "紧密",
        value: "small",
      },
    ]
    const densityValue = ref('medium')

    /*列设置*/
    // 复选框全选
    const allChecked = ref(true)
    // 复选框列表
    const checkboxList = ref([])
    // 列表添加数据
    for (let i = 0;i < columns.length; i++){
      checkboxList.value.push({name: columns[i].title, checked: true})
    }
    // 全选改变事件
    const allChange = ()=>{
      if (allChecked.value) {
        checkboxList.value.forEach(item => {item.checked = true})
      } else {
        checkboxList.value.forEach(item => {item.checked = false})
      }
    }
    // 复选框单个改变事件
    const itemChange = ()=>{
      allChecked.value = !!checkboxList.value.every(item => item.checked);
    }


    return {
      densityOptions,
      densityValue,
      data,
      columns,
      pagination,
      loading,
      refresh,
      page,
      checkboxList,
      allChecked,
      allChange,
      itemChange


    }
  }

})
</script>

<style scoped>

</style>